<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <acc-set-card></acc-set-card>
        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <div class="tree-box flex">
                <div class="flex-left" :style="{'height': (containerHeight - 100) + 'px'}">
                    <vxe-table
                        ref="xTable1"
                        border
                        max-height="500"
                        :radio-config="{labelField: 'name', trigger: 'row',highlight: true}"
                        :data="typeData"
                        @radio-change="currentChangeEvent1"
                    >
                        <vxe-table-column type="radio" title width="40"></vxe-table-column>
                        <vxe-table-column field="description" title="科目属性"></vxe-table-column>
                    </vxe-table>
                </div>
                <div class="flex-right">
                    <div slot="header" class="clearfix">
                        <vxe-toolbar>
                            <template v-slot:buttons>
                                <el-button
                                    type="primary"
                                    icon="el-icon-folder-add"
                                    @click="goAdd"
                                >新增</el-button>
                                <el-button type="warning" icon="el-icon-edit" @click="goEdit">修改</el-button>
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="delAllSelection"
                                >删除</el-button>
                            </template>
                        </vxe-toolbar>

                        <div class="handler-box">
                            <el-form label-width="100px">
                                <el-row>
                                    <el-col :sm="20" :md="5">
                                        <el-form-item label="科目代码">
                                            <el-input v-model="checkTableRow.subCode" disabled></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="20" :md="5">
                                        <el-form-item label="科目名称">
                                            <el-input v-model="checkTableRow.subName" disabled></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="20" :md="5">
                                        <el-form-item label="科目属性">
                                            <el-input v-model="checkTableRow.categoryName" disabled></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="20" :md="5">
                                        <el-form-item label="余额方向">
                                            <el-select
                                                v-model="checkTableRow.drFlag"
                                                placeholder="请选择"
                                                disabled
                                            >
                                                <el-option label="借方" :value="1"></el-option>
                                                <el-option label="贷方" :value="0"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :sm="20" :md="5">
                                        <el-form-item label="上级代码">
                                            <el-input v-model="checkTableRow.parentSubId" disabled></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="20" :md="5">
                                        <el-form-item label="科目性质">
                                            <el-select
                                                v-model="checkTableRow.type"
                                                placeholder="请选择"
                                                disabled
                                            >
                                                <el-option label="总账科目" :value="1"></el-option>
                                                <el-option label="明细科目" :value="2"></el-option>
                                                <el-option label="独立科目" :value="3"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="20" :md="5">
                                        <el-form-item label="科目层级">
                                            <el-input v-model="checkTableRow.level" disabled></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="20" :md="5">
                                        <el-form-item label="结转损益">
                                            <el-select
                                                v-model="checkTableRow.prolossFlag"
                                                disabled
                                                placeholder="请选择"
                                            >
                                                <el-option label="自动结转" :value="1"></el-option>
                                                <el-option label="不结转" :value="2"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :sm="20" :md="12">
                                        <el-form-item>
                                            <el-radio
                                                disabled
                                                v-model="checkTableRow.currFlag"
                                                :label="1"
                                            >外币</el-radio>
                                            <el-radio
                                                disabled
                                                v-model="checkTableRow.empFlag"
                                                :label="1"
                                            >人员</el-radio>
                                            <el-radio
                                                disabled
                                                v-model="checkTableRow.deptFlag"
                                                :label="1"
                                            >部门</el-radio>
                                            <el-radio
                                                disabled
                                                v-model="checkTableRow.dealFlag"
                                                :label="1"
                                            >往来</el-radio>
                                            <el-radio
                                                disabled
                                                v-model="checkTableRow.proFlag"
                                                :label="1"
                                            >项目</el-radio>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>

                        <vxe-table
                            border
                            resizable
                            keep-source
                            highlight-hover-row
                            highlight-hover-column
                            ref="xTree"
                            row-id="id"
                            height="500"
                            :loading="loading"
                            :tree-config="treeConfig"
                            :radio-config="{labelField: 'name', trigger: 'row',highlight: true}"
                            :data="tableData"
                            @radio-change="currentChangeEvent"
                        >
                            <vxe-table-column type="radio" title width="100" tree-node></vxe-table-column>
                            <vxe-table-column field="subCode" title="科目代码"></vxe-table-column>
                            <vxe-table-column field="subName" title="科目名称"></vxe-table-column>
                            <vxe-table-column field="drFlag" title="余额方向">
                                <template slot-scope="scope">{{scope.row.drFlag == 1?'借方':'贷方'}}</template>
                            </vxe-table-column>
                            <vxe-table-column field="prolossFlag" title="结转损益">
                                <template
                                    slot-scope="scope"
                                >{{scope.row.prolossFlag == 1?'自动转出':'不转出'}}</template>
                            </vxe-table-column>
                        </vxe-table>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
            title="新增科目"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
                <el-form-item label="科目代码">
                    <el-input placeholder="保存后自动生成" disabled></el-input>
                </el-form-item>

                <el-form-item label="上级科目" prop="parentSubId">
                    <el-cascader
                        ref="cascaderAddr"
                        v-model="ruleForm.parentSubId"
                        :options="tableData"
                        :props="defaultProps"
                        :show-all-levels="false"
                        clearable
                        @change="handleChange"
                    ></el-cascader>
                </el-form-item>

                <el-form-item label="科目名称" prop="subName">
                    <el-input v-model="ruleForm.subName"></el-input>
                </el-form-item>

                <el-form-item label="科目属性">
                    <el-input v-model="ruleForm.categoryName" disabled></el-input>
                </el-form-item>

                <el-form-item label="余额方向" prop="drFlag">
                    <el-select v-model="ruleForm.drFlag" placeholder="请选择">
                        <el-option label="借方" :value="1"></el-option>
                        <el-option label="贷方" :value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="结转损益">
                    <el-select v-model="ruleForm.prolossFlag" placeholder="请选择">
                        <el-option label="自动结转" :value="1"></el-option>
                        <el-option label="不结转" :value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="科目性质">
                    <el-select v-model="ruleForm.type" placeholder="请选择" disabled>
                        <el-option label="总账科目" :value="1"></el-option>
                        <el-option label="明细科目" :value="2"></el-option>
                        <el-option label="独立科目" :value="3"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="科目层级">
                    <el-input v-model="ruleForm.level" disabled></el-input>
                </el-form-item>

                <el-form-item label="是否核算外币:">
                    <el-switch
                        v-model="ruleForm.currFlag"
                        :active-value="1"
                        :inactive-value="0"
                        inactive-text="否"
                        active-text="是"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="是否核算人员:">
                    <el-switch
                        v-model="ruleForm.empFlag"
                        :active-value="1"
                        :inactive-value="0"
                        inactive-text="否"
                        active-text="是"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="是否核算部门:">
                    <el-switch
                        v-model="ruleForm.deptFlag"
                        :active-value="1"
                        :inactive-value="0"
                        inactive-text="否"
                        active-text="是"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="是否核算往来:">
                    <el-switch
                        v-model="ruleForm.dealFlag"
                        :active-value="1"
                        :inactive-value="0"
                        inactive-text="否"
                        active-text="是"
                    ></el-switch>
                </el-form-item>

                <el-form-item label="是否核算项目:">
                    <el-switch
                        v-model="ruleForm.proFlag"
                        :active-value="1"
                        :inactive-value="0"
                        inactive-text="否"
                        active-text="是"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="更新科目"
            :visible.sync="dialogVisibleEdit"
            width="30%"
            :before-close="handleClose"
        >
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="120px">
                <el-form-item label="科目名称" prop="subName">
                    <el-input v-model="editForm.subName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleEdit = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
import appMain from '../../../utils/app_main';
import _ from 'lodash';
import XEUtils from 'xe-utils';

export default {
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            typeData: [
                // {
                //     categoryId: 'Duis voluptate Ut adipisicing Lorem', //科目分类ID
                //     categoryName: 'Duis voluptate Ut adipisicing Lorem', //科目分类ID
                //     companyId: 'dolor culpa aute consequat', //账套ID
                //     description: 'eu nsunt' //科目属性描述
                // },
            ],
            tableData: [
                // {
                //     categoryId: '111111', //科目类别
                //     categoryName: 'st1111ring', //科目类别名字
                //     children: [
                //         {
                //             categoryName: 'st12121r1ing', //科目类别名字
                //             categoryId: '12121', //科目类别
                //             children: [], //
                //             companyId: 'string', //公司id
                //             currFlag: 0, //是否核算外币：0:否 1是-
                //             dealFlag: 0, //是否合算往来单位：0否，1是
                //             deptFlag: 0, //是否核算部门:0否，1是
                //             subName: 'stri12312ng', //科目名称
                //             drFlag: 0, //余额方向 1.借方 2.贷方
                //             empFlag: 0, //是否核算人员：0否，1是
                //             id: 'string', //
                //             level: 0, //科目层级：最上层总账科目1，下一层为2，独立科目99
                //             parentSubId: 'string', //上级科目
                //             proFlag: 0, //是否合算项目：0否，1是
                //             prolossFlag: 0, //结转损益方向：1.自动转出（结算没有余额） 2.不转出（结算有余额）
                //             subCode: 'string', //科目代码
                //             type: 0 //科目性质:1.总账科目,总账科目有下级科目 2.明细科目，最底层 3.独立科目没有上下级科目
                //         },
                //         {
                //             categoryName: 'string', //科目类别名字
                //             categoryId: 'string', //科目类别
                //             children: [], //
                //             companyId: 'string', //公司id
                //             currFlag: 0, //是否核算外币：0:否 1是-
                //             dealFlag: 0, //是否合算往来单位：0否，1是
                //             deptFlag: 0, //是否核算部门:0否，1是
                //             subName: 'string', //科目名称
                //             drFlag: 0, //余额方向 1.借方 2.贷方
                //             empFlag: 0, //是否核算人员：0否，1是
                //             id: 'string', //
                //             level: 0, //科目层级：最上层总账科目1，下一层为2，独立科目99
                //             parentSubId: 'string', //上级科目
                //             proFlag: 0, //是否合算项目：0否，1是
                //             prolossFlag: 0, //结转损益方向：1.自动转出（结算没有余额） 2.不转出（结算有余额）
                //             subCode: 'string', //科目代码
                //             type: 0 //科目性质:1.总账科目,总账科目有下级科目 2.明细科目，最底层 3.独立科目没有上下级科目
                //         }
                //     ], //
                //     companyId: 'string', //公司id
                //     currFlag: 0, //是否核算外币：0:否 1是-
                //     dealFlag: 0, //是否合算往来单位：0否，1是
                //     deptFlag: 0, //是否核算部门:0否，1是
                //     subName: 'string', //科目名称
                //     drFlag: 0, //余额方向 1.借方 2.贷方
                //     empFlag: 0, //是否核算人员：0否，1是
                //     id: 'string', //
                //     level: 0, //科目层级：最上层总账科目1，下一层为2，独立科目99
                //     parentSubId: 'string', //上级科目
                //     proFlag: 0, //是否合算项目：0否，1是
                //     prolossFlag: 0, //结转损益方向：1.自动转出（结算没有余额） 2.不转出（结算有余额）
                //     subCode: 'string', //科目代码
                //     type: 0 //科目性质:1.总账科目,总账科目有下级科目 2.明细科目，最底层 3.独立科目没有上下级科目
                // },
            ],

            defaultProps: {
                label: 'subName',
                value: 'id',
                children: 'child',
                checkStrictly: true
            },
            checkTableRow: {
                // categoryId: 'string', //科目类别
                // categoryName: 'string', //科目类别名字
                // children: [], //
                // companyId: 'string', //公司id
                // currFlag: 1, //是否核算外币：0:否 1是-
                // dealFlag: 1, //是否合算往来单位：0否，1是
                // deptFlag: 1, //是否核算部门:0否，1是
                // subName: 'string', //科目名称
                // drFlag: 0, //余额方向 1.借方 2.贷方
                // empFlag: 0, //是否核算人员：0否，1是
                // id: 'string', //
                // level: 0, //科目层级：最上层总账科目1，下一层为2，独立科目99
                // parentSubId: 'string', //上级科目
                // proFlag: 0, //是否合算项目：0否，1是
                // prolossFlag: 1, //结转损益方向：1.自动转出（结算没有余额） 2.不转出（结算有余额）
                // subCode: 'string', //科目代码
                // type: 0 //科目性质:1.总账科目,总账科目有下级科目 2.明细科目，最底层 3.独立科目没有上下级科目
            },
            //科目属性
            checkTypeRow: {
                // categoryId: 'Duis voluptate Ut adipisicing Lorem', //科目分类ID
                // categoryName: 'Duis voluptate Ut adipisicing Lorem', //科目分类ID
                // companyId: 'dolor culpa aute consequat', //账套ID
                // description: 'eu nsunt' //科目属性描述
            },
            loading: false,
            treeConfig: {
                children: 'child',
                expandAll: true
            },
            rules: {
                subName: [
                    { required: true, message: '请输入科目名称', trigger: 'blur' },
                    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                ],
                drFlag: [{ required: true, message: '请选择余额方向', trigger: 'change' }],
                prolossFlag: [{ required: true, message: '请选择结转损益', trigger: 'change' }]
            },
            dialogVisible: false, //新增科目
            dialogVisibleEdit: false, //编辑科目
            ruleForm: {
                categoryId: '', //科目类别Id
                categoryName: '', //科目类别名字
                currFlag: 1, //是否核算外币：0:否  1是-
                dealFlag: 1, //是否合算往来单位：0否，1是
                deptFlag: 1, //是否核算部门:0否，1是
                subName: '', //科目名称
                drFlag: 1, //余额方向	1.借方 2.贷方
                empFlag: 1, //是否核算人员：0否，1是
                level: 99, //科目层级:接口返回
                parentSubId: '', //上级科目
                proFlag: 1, //是否合算项目：0否，1是
                prolossFlag: 1, //结转损益方向：1.自动转出（结算没有余额） 2.不转出（结算有余额）
                type: 1 //科目性质:接口返回
            }, //新增model
            editForm: {}
        };
    },
    created() {
        this.subjectCategoryFindAll();
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 200;
        this.pageTitle = this.$router.currentRoute.meta.title;
        //$refs.xTree.setAllTreeExpand(true);
    },
    methods: {
        //获取科目属性
        subjectCategoryFindAll() {
            appMain
                .subjectCategoryFindAll()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.typeData = res.data.data;
                        console.log('subjectCategoryFindAll', this.typeData);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //根据科目属性获取科目列表
        subjectGetTreeByType(id) {
            this.loading = true;
            appMain
                .subjectGetTreeByType({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        setTimeout(() => {
                            this.tableData = res.data.data;
                            this.loading = false;
                        }, 300);
                        //this.tableData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //点击单选方法
        currentChangeEvent({ row }) {
            this.checkTableRow = row;
            console.log('currentChangeEvent', this.checkTableRow);
        },
        //科目属性
        currentChangeEvent1({ row }) {
            this.checkTypeRow = row;
            this.subjectGetTreeByType(row.categoryId);

            console.log('currentChangeEvent1', row);
        },
        goAdd() {
            if (!this.checkTypeRow.categoryId) {
                this.$message('请先选择科目属性');
                return;
            }
            this.ruleForm.categoryName = this.checkTypeRow.subName;
            this.ruleForm.categoryId = this.checkTypeRow.categoryId;
            // this.dialogVisible = true;
            this.$router.push({
                path: 'subjectManagementDetail',
                query: {
                    categoryId: this.checkTypeRow.categoryId
                    //ruleForm: JSON.stringify(this.ruleForm)
                }
            });
        },
        goEdit() {
            //this.$XModal.alert(this.checkTableRow.id);
            //this.$XModal.alert(JSON.stringify(this.$refs.xTree.getRadioRecord()));
            if (this.$refs.xTree.getRadioRecord() != null) {
                this.editForm = _.clone(this.$refs.xTree.getRadioRecord());
                //this.dialogVisibleEdit = true;
                this.$router.push({
                    path: 'subjectManagementDetail',
                    query: {
                        id: this.editForm.id
                        //ruleForm: JSON.stringify(this.editForm)
                    }
                });
            } else {
                this.$message.info('请选择一条记录,再进行编辑');
            }
        },
        delAllSelection() {
            if (this.$refs.xTree.getRadioRecord() != null) {
                this.editForm = _.clone(this.$refs.xTree.getRadioRecord());
            } else {
                this.$message.info('请选择一条记录,再进行编辑');
                return;
            }

            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    //请求接口删除数据
                    this.deleteSubject();
                })
                .catch(() => {});
        },
        deleteSubject() {
            appMain
                .subjectDelById({}, this.editForm.id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.subjectGetTreeByType(this.checkTypeRow.categoryId);
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },

        addSubject() {
            appMain
                .subjectInsert(this.ruleForm)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.dialogVisible = false;
                        this.subjectGetTreeByType(this.checkTypeRow.categoryId);
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        updateSubject() {
            appMain
                .subjectUpdateById(this.editForm)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.dialogVisibleEdit = false;
                        this.subjectGetTreeByType(this.checkTypeRow.categoryId);
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogVisible = false;
                    done();
                })
                .catch(_ => {});
        },
        handleChange(value) {
            //var categoryName = this.$refs['cascaderAddr'].inputValue;
            var currentLabels = this.$refs['cascaderAddr'].getCheckedNodes();
            var data = currentLabels[0].data;

            if (data.level == 99) {
                this.ruleForm.level = 2;
                this.ruleForm.type = 2;
            } else if (1 <= data.level || data.level < 98) {
                this.ruleForm.level = data.level + 1;
                this.ruleForm.type = 2;
            }

            this.ruleForm.parentSubId = value[value.length - 1];
            console.log('handleChange', value);
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (formName == 'ruleForm') {
                        //新增科目
                        this.addSubject();
                    } else if (formName == 'editForm') {
                        this.updateSubject();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    computed: {
        //上级科目id
        getParentSubId: function() {
            return this.ruleForm.parentSubId;
        }
    },
    watch: {
        tableData: {
            //展开行
            handler: function() {
                for (const key in this.tableData) {
                    this.$refs.xTree.setTreeExpand(this.tableData[key], true);
                }
            }
        },
        getParentSubId: {
            handler: function() {
                if (this.ruleForm.parentSubId == '') {
                    this.level = 99;
                    this.type = 1;
                }
                console.log('getParentSubId', this.ruleForm);
            }
        },
        dialogVisible(newValue, oldValue) {
            console.log('dialogVisible', newValue);
            if (newValue == false) {
                this.ruleForm = {
                    categoryId: '', //科目类别Id
                    categoryName: '', //科目类别名字
                    currFlag: 1, //是否核算外币：0:否  1是-
                    dealFlag: 1, //是否合算往来单位：0否，1是
                    deptFlag: 1, //是否核算部门:0否，1是
                    subName: '', //科目名称
                    drFlag: 1, //余额方向	1.借方 2.贷方
                    empFlag: 1, //是否核算人员：0否，1是
                    level: 99, //科目层级:接口返回
                    parentSubId: '', //上级科目
                    proFlag: 1, //是否合算项目：0否，1是
                    prolossFlag: 1, //结转损益方向：1.自动转出（结算没有余额） 2.不转出（结算有余额）
                    type: 1 //科目性质:接口返回
                };
            }
        }
    }
};
</script>

<style lang="css" scoped>
.el-card {
    height: 100%;
}

.flex-right {
    padding: 20px;
}

.handler-box {
    border: 1px solid rgb(232, 234, 236);
    padding: 5px;
    margin-bottom: 15px;
}

.tree-box .flex-left {
    padding: 0px !important;
}
</style>